import { motion } from 'framer-motion';

// 核心功能数据
const features = [
  {
    id: 1,
    title: "项目全生命周期管理",
    description: "支持7类业务快速建项，自动关联客户信息，规则化生成项目，可视化计划管理。",
    imageType: "project",
    items: [
      "智能立项与配置，自定义维护业务类别",
      "自动关联客户信息，配置参与人及分配比例",
      "规则化生成项目，减少人工重复操作",
      "可视化计划管理，历史版本自动存档"
    ]
  },
  {
    id: 2,
    title: "人效提升引擎",
    description: "精细化工时填报，双轨工时管理，智能考勤集成，提升员工工作效率。",
    imageType: "efficiency",
    items: [
      "员工每日记录项目内容及工时，项目经理审核",
      "双轨工时管理，区分员工端与管理端视角",
      "智能考勤集成，对接钉钉考勤数据",
      "自动生成效率分析报表，优化排班与任务分配"
    ]
  },
  {
    id: 3,
    title: "薪酬与奖金激励体系",
    description: "薪酬明细清晰化，自动化薪酬计算，动态调薪记录，公平化奖金分配机制。",
    imageType: "salary",
    items: [
      "自动同步员工基础薪资、绩效数据",
      "智能核算五险一金，支持比例自定义",
      "自动生成年度奖金结算表",
      "独创双维度分配模型，确保分配客观公正"
    ]
  },
  {
    id: 4,
    title: "协同与文档管理",
    description: "工作计划协同，员工提交下周计划，部门主管审核，文档安全共享。",
    imageType: "collaboration",
    items: [
      "员工提交下周计划，部门主管审核",
      "支持小组会议调整任务，明确分工",
      "一键批量审核功能，提高效率",
      "限制性上传/查看权限，保障信息安全"
    ]
  },
  {
    id: 5,
    title: "智能决策支持",
    description: "多维度统计看板，项目、员工、时间多维度分析，数据驱动决策。",
    imageType: "dashboard",
    items: [
      "项目维度：工时消耗/预算执行率",
      "员工维度：效率比/项目贡献度",
      "时间维度：月度/年度薪酬奖金分布",
      "数据驱动决策，优化资源配置与成本控制"
    ]
  },
  {
    id: 6,
    title: "灵活配置架构",
    description: "完善的权限管理系统，支持角色级奖金比例配置，部门岗位树形结构管理。",
    imageType: "settings",
    items: [
      "角色级奖金比例配置",
      "部门岗位树形结构管理",
      "五险一金参数动态调整",
      "支持与钉钉等第三方系统集成"
    ]
  }
];

// 根据imageType返回对应的模拟截图
const FeatureImage = ({ imageType }: { imageType: string }) => {
  const style = {
    project: "bg-blue-50 border-blue-200",
    efficiency: "bg-green-50 border-green-200",
    salary: "bg-purple-50 border-purple-200",
    collaboration: "bg-yellow-50 border-yellow-200",
    dashboard: "bg-indigo-50 border-indigo-200",
    settings: "bg-gray-50 border-gray-200"
  };
  
  const title = {
    project: "项目管理",
    efficiency: "工时效率统计",
    salary: "奖金结算表",
    collaboration: "工作计划",
    dashboard: "数据统计",
    settings: "系统配置"
  };
  
  return (
    <div className={`rounded-lg overflow-hidden border ${style[imageType as keyof typeof style]} p-4`}>
      <div className="bg-gray-800 h-6 rounded-t-md flex items-center px-3 mb-3">
        <div className="flex space-x-1.5">
          <div className="w-2.5 h-2.5 rounded-full bg-red-400"></div>
          <div className="w-2.5 h-2.5 rounded-full bg-yellow-400"></div>
          <div className="w-2.5 h-2.5 rounded-full bg-green-400"></div>
        </div>
      </div>
      <h4 className="text-sm font-medium text-gray-700 mb-2">{title[imageType as keyof typeof title]}</h4>
      
      {imageType === "efficiency" && (
        <div className="text-xs">
          <div className="grid grid-cols-7 gap-1 mb-1 text-gray-500 border-b border-gray-200 pb-1">
            <div>序号</div>
            <div>员工</div>
            <div>打卡工时</div>
            <div>有效工时</div>
            <div>考勤工时</div>
            <div>工作工时比</div>
            <div>有效工时比</div>
          </div>
          {[1, 2, 3].map((i) => (
            <div key={i} className="grid grid-cols-7 gap-1 py-1 border-b border-gray-100">
              <div>{i}</div>
              <div className="text-blue-600">员工{i}</div>
              <div>8{2+i}.{i}0</div>
              <div className="text-blue-600">7{6-i}.0</div>
              <div>18{4+i}.{6+i}8</div>
              <div>{44+i}.{67-i}%</div>
              <div>{41-i}.{15+i}%</div>
            </div>
          ))}
        </div>
      )}
      
      {imageType === "salary" && (
        <div className="text-xs">
          <div className="grid grid-cols-10 gap-1 mb-1 text-gray-500 border-b border-gray-200 pb-1">
            <div>序号</div>
            <div>员工</div>
            <div>项目</div>
            <div>业务类别</div>
            <div>结算周期</div>
            <div>业务拓展奖</div>
            <div>项目经理奖</div>
            <div>有效工时</div>
            <div>质控费</div>
            <div>总奖金</div>
          </div>
          {[1, 2, 3].map((i) => (
            <div key={i} className="grid grid-cols-10 gap-1 py-1 border-b border-gray-100">
              <div>{i}</div>
              <div className="text-blue-600">员工{i}</div>
              <div>项目{i}</div>
              <div>代理记账</div>
              <div>2025</div>
              <div>{i*100}.00</div>
              <div>{i*50}.00</div>
              <div>{i*1000}.00</div>
              <div>0.00</div>
              <div className="font-medium">{i*1200}.00</div>
            </div>
          ))}
        </div>
      )}
      
       {imageType === "project" && (
         <img 
            src="/img/1.jpg" 
           alt="捷益通财务项目管理功能截图 - 支持7类业务快速建项和可视化计划管理" 
           className="w-full h-auto rounded border border-gray-200 shadow-sm"
         />
       )}
       
       {imageType === "dashboard" && (
         <img 
            src="/img/2.jpg" 
           alt="捷益通财务数据统计功能截图 - 多维度分析项目工时消耗和预算执行率" 
           className="w-full h-auto rounded border border-gray-200 shadow-sm"
         />
       )}
       
       {imageType === "collaboration" && (
         <img 
            src="/img/3.jpg" 
           alt="捷益通财务工作计划功能截图 - 支持员工提交计划和部门主管审核" 
           className="w-full h-auto rounded border border-gray-200 shadow-sm"
         />
       )}
       
       {imageType === "settings" && (
         <img 
            src="/img/4.jpg" 
           alt="捷益通组织配置功能截图 - 支持角色级权限配置和部门岗位管理" 
           className="w-full h-auto rounded border border-gray-200 shadow-sm"
         />
       )}
    </div>
  );
};

export default function FeatureSection() {
  return (
    <section id="features" className="py-20 bg-white">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900">核心功能模块</h2>
          <p className="mt-4 text-lg text-gray-600">
            捷益通智能财务项目管理系统提供全方位的功能支持，满足财务类企业的核心管理需求
          </p>
        </div>
        
        <div className="space-y-24">
          {features.map((feature, index) => (
            <motion.div 
              key={feature.id}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5 }}
              viewport={{ once: true }}
              className={`flex flex-col ${index % 2 === 1 ? 'md:flex-row-reverse' : 'md:flex-row'} items-center gap-10`}
            >
              <div className="md:w-1/2">
                <h3 className="text-2xl font-bold text-gray-900 mb-4">{feature.title}</h3>
                <p className="text-gray-600 mb-6">{feature.description}</p>
                <ul className="space-y-3">
                  {feature.items.map((item, i) => (
                    <li key={i} className="flex items-start">
                      <div className="flex-shrink-0 h-5 w-5 rounded-full bg-blue-100 flex items-center justify-center mt-0.5 mr-3">
                        <span className="text-blue-600 text-xs">✓</span>
                      </div>
                      <span className="text-gray-700">{item}</span>
                    </li>
                  ))}
                </ul>
              </div>
              <div className="md:w-1/2">
                <FeatureImage imageType={feature.imageType} />
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}